<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单 Mermaid 交互示例</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        
        #diagram-container {
            position: relative;
            text-align: center;
            padding: 20px;
            min-height: 300px;
        }
        
        .option-menu {
            position: absolute;
            background: white;
            border: 2px solid #007acc;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            min-width: 120px;
            animation: fadeIn 0.2s ease-out;
        }
        
        .option-header {
            background: #007acc;
            color: white;
            padding: 8px 12px;
            font-weight: bold;
            font-size: 14px;
            border-radius: 6px 6px 0 0;
        }
        
        .option-item {
            padding: 10px 12px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s;
        }
        
        .option-item:hover {
            background: #f0f8ff;
        }
        
        .option-item:last-child {
            border-bottom: none;
            border-radius: 0 0 6px 6px;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .highlight {
            filter: drop-shadow(0 0 8px #007acc);
        }
        
        .info {
            margin-top: 20px;
            padding: 15px;
            background: #e7f3ff;
            border-left: 4px solid #007acc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 简单 Mermaid 交互示例</h1>
        
        <div id="diagram-container">
            <div id="mermaid-diagram"></div>
        </div>
        
        <div class="info">
            <strong>使用说明：</strong>点击任意节点查看可用操作
        </div>
    </div>

    <script>
        // 初始化 Mermaid
        mermaid.initialize({ 
            startOnLoad: false,
            theme: 'default'
        });
        
        // 简单的流程图定义
        const diagramDefinition = `
        graph TD
            A[用户登录] --> B[验证身份]
            B --> C{验证成功?}
            C -->|是| D[进入系统]
            C -->|否| E[显示错误]
        `;
        
        // 节点配置
        const nodeConfig = {
            'A': {
                name: '用户登录',
                options: ['查看日志', '重置状态']
            },
            'B': {
                name: '验证身份', 
                options: ['检查状态', '测试连接']
            },
            'C': {
                name: '验证成功?',
                options: ['查看规则', '修改条件']
            },
            'D': {
                name: '进入系统',
                options: ['监控用户', '查看统计']
            },
            'E': {
                name: '显示错误',
                options: ['查看错误', '发送报告']
            }
        };
        
        let currentMenu = null;
        
        // 渲染图表
        async function renderDiagram() {
            try {
                const { svg } = await mermaid.render('simple-diagram', diagramDefinition);
                document.getElementById('mermaid-diagram').innerHTML = svg;
                
                // 添加交互
                setTimeout(addInteraction, 500);
            } catch (error) {
                console.error('渲染失败:', error);
            }
        }
        
        // 添加交互功能
        function addInteraction() {
            const svgElement = document.querySelector('#mermaid-diagram svg');
            if (!svgElement) return;
            
            // 查找所有可能的节点元素
            const nodeElements = svgElement.querySelectorAll('g');
            
            nodeElements.forEach((element, index) => {
                const textEl = element.querySelector('text');
                const shapeEl = element.querySelector('rect, polygon, path, circle, ellipse');
                
                if (textEl && shapeEl) {
                    const nodeId = getNodeId(textEl.textContent);
                    
                    if (nodeConfig[nodeId]) {
                        // 添加鼠标样式
                        element.style.cursor = 'pointer';
                        
                        // 添加点击事件
                        element.addEventListener('click', (event) => {
                            event.stopPropagation();
                            showOptions(event, element, nodeId);
                        });
                        
                        console.log(`已添加交互: ${nodeId} - ${textEl.textContent}`);
                    }
                }
            });
        }
        
        // 获取节点ID
        function getNodeId(textContent) {
            const text = textContent.trim();
            
            if (text.includes('用户登录')) return 'A';
            if (text.includes('验证身份')) return 'B';
            if (text.includes('验证成功')) return 'C';
            if (text.includes('进入系统')) return 'D';
            if (text.includes('显示错误')) return 'E';
            
            return null;
        }
        
        // 显示选项菜单
        function showOptions(event, element, nodeId) {
            // 移除已存在的菜单
            removeCurrentMenu();
            
            // 高亮当前节点
            highlightNode(element);
            
            const config = nodeConfig[nodeId];
            const rect = element.getBoundingClientRect();
            const container = document.getElementById('diagram-container');
            const containerRect = container.getBoundingClientRect();
            
            // 创建选项菜单
            const menu = document.createElement('div');
            menu.className = 'option-menu';
            
            // 计算位置
            const left = rect.right - containerRect.left + 10;
            const top = rect.top - containerRect.top;
            
            menu.style.left = left + 'px';
            menu.style.top = top + 'px';
            
            // 添加标题
            const header = document.createElement('div');
            header.className = 'option-header';
            header.textContent = config.name;
            menu.appendChild(header);
            
            // 添加选项
            config.options.forEach(option => {
                const item = document.createElement('div');
                item.className = 'option-item';
                item.textContent = option;
                
                item.addEventListener('click', () => {
                    executeOption(nodeId, option);
                    removeCurrentMenu();
                });
                
                menu.appendChild(item);
            });
            
            container.appendChild(menu);
            currentMenu = menu;
            
            // 3秒后自动关闭
            setTimeout(removeCurrentMenu, 3000);
        }
        
        // 执行选项
        function executeOption(nodeId, option) {
            console.log(`执行: ${nodeId} -> ${option}`);
            
            const messages = {
                '查看日志': `📋 ${nodeConfig[nodeId].name} 日志:\n[INFO] 操作正常\n[INFO] 无异常记录`,
                '重置状态': `🔄 ${nodeConfig[nodeId].name} 状态已重置`,
                '检查状态': `✅ ${nodeConfig[nodeId].name} 运行正常`,
                '测试连接': `🔗 ${nodeConfig[nodeId].name} 连接测试通过`,
                '查看规则': `📖 ${nodeConfig[nodeId].name} 规则:\n- 用户名不为空\n- 密码长度>=6`,
                '修改条件': `⚙️ ${nodeConfig[nodeId].name} 条件已更新`,
                '监控用户': `👁️ ${nodeConfig[nodeId].name} 用户监控已启动`,
                '查看统计': `📊 ${nodeConfig[nodeId].name} 统计:\n- 今日登录: 127人\n- 平均时长: 2.3小时`,
                '查看错误': `❌ ${nodeConfig[nodeId].name} 错误详情:\n- 错误码: 401\n- 原因: 密码错误`,
                '发送报告': `📧 ${nodeConfig[nodeId].name} 错误报告已发送`
            };
            
            const message = messages[option] || `${option} 执行完成`;
            alert(message);
        }
        
        // 高亮节点
        function highlightNode(element) {
            // 清除所有高亮
            document.querySelectorAll('g').forEach(el => {
                el.classList.remove('highlight');
            });
            
            // 高亮当前节点
            element.classList.add('highlight');
        }
        
        // 移除当前菜单
        function removeCurrentMenu() {
            if (currentMenu) {
                currentMenu.remove();
                currentMenu = null;
            }
            
            // 清除高亮
            document.querySelectorAll('g').forEach(el => {
                el.classList.remove('highlight');
            });
        }
        
        // 点击空白区域关闭菜单
        document.addEventListener('click', (event) => {
            if (!event.target.closest('.option-menu')) {
                removeCurrentMenu();
            }
        });
        
        // 键盘ESC关闭菜单
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                removeCurrentMenu();
            }
        });
        
        // 初始化
        renderDiagram();
    </script>
</body>
</html>